<template>
  <div class="videolist">
    <!-- content内容 -->
    <div class="mvlist-content">
      <div class="mvlist-item" v-for="(item, index) of videos" :key="index">
        <!-- 图片 -->
        <div class="item-img" @click="toMVdetails(item.vid)">
          <div class="mv-playCount">
            <span
              ><i class="iconfont icon-luxiang2"></i
              >{{ item.playTime | playCount }}</span
            >
          </div>
          <img :src="item.coverUrl" alt="" />
          <div class="video-time">
            <span>{{ item.durationms | playtime }}</span>
          </div>
        </div>
        <!-- 名字 标题 -->
        <div class="item-name">
          <p
            class="item-title"
            :title="item.title"
            @click="toMVdetails(item.vid)"
          >
            {{ item.title }}
          </p>
          <p class="name" :title="item.creator[0].userName">
            {{ item.creator[0].userName }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {
    videos: {
      type: [Object, Array, String]
    }
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    toMVdetails(id) {
      this.$router.push({
        name: "videodetails",
        query: {
          id
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.videolist {
  margin-bottom: 30px;
}
.mvlist-content {
  display: flex;
  flex-wrap: wrap;
  margin-top: 1.875rem;
  .mvlist-item {
    width: 25%;
    padding: 0.3125rem 0.625rem;
    box-sizing: border-box;
    .item-img {
      position: relative;
      width: 100%;
      height: 200px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 0.3125rem;
        cursor: pointer;
      }
      .mv-playCount {
        position: absolute;
        top: 0;
        right: 0;
        padding: 0.125rem 0.5rem;
        color: #fff;
        .icon-luxiang2 {
          font-size: 1.25rem;
          vertical-align: middle;
        }
      }
      .video-time {
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0.125rem 0.5rem;
        color: #fff;
      }
    }
    .item-name {
      color: #555555;
      padding: 0.3125rem 0;
      .item-title:hover {
        color: #000;
      }
      .item-title {
        cursor: pointer;
        font-size: 0.875rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
      }
      .name {
        color: #ccc;
        cursor: pointer;
        margin-top: 0.1875rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        font-size: 14px;
      }
      .name:hover {
        color: #aaaaaa;
      }
    }
  }
}
</style>
